<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="content">消息通知</block>
		</cu-custom>
		<view class="xitong">
			<!-- //学校合作申请 -->
			<view class="nzxx" @tap="to_companyNotice(1)" >
				<view class="red">
					<view class="dalou iconfont icon-xuexiao1"></view>
					<view class="numBox" v-if="one.count>0">{{one.count}}</view>
				</view>
				<view class="zitikuai" >
					<view class="xtxx">学校合作申请<view class="jtian">{{timeToStr(one.add_time,'hh:mm')}}</view></view>
					<block>
						<view class="shizhuan" v-if="one.content!=''">{{one.content}}</view>
						<view class="shizhuan" v-else>暂无消息</view>
					</block>
				</view>
			</view>
			
			<!-- //实训新生申请 -->
			<view class="nzxx" @tap="to_companyNotice(3)">
				<view class="blue">
					<view class="maozi iconfont icon-shixisheng"></view>
					<view class="numBox" v-if="three.count>0">{{three.count}}</view>
				</view>
				<view class="zitikuai">
					<view class="xtxx">实训新生申请<view class="jtian">{{timeToStr(three.add_time,'hh:mm')}}</view></view>
					<view class="shizhuan">{{three.content}}</view>
				</view>
			</view>
			
			<!-- //系统通知 -->
			<view class="nzxx" style="border-bottom: none;" @tap="to_companyNotice(10)">
				<view class="green">
					<view class="maozi iconfont icon-xiaoxi"></view>
					<view class="numBox" v-if="ten.count>0">{{ten.count}}</view>
				</view>
				<view class="zitikuai">
					<view class="xtxx">系统通知<view class="jtian">{{timeToStr(ten.add_time,'hh:mm')}}</view></view>
					<view class="shizhuan">{{ten.content}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const {appLogin,httpGet,httpPost,timeToStr} = require("@/utils/common.js")
	export default {
		data() {
			return {
				type:1,
				one:[],
				three:[],
				ten:[],
				timeToStr:timeToStr,
				num:0
			}
		},
		onLoad() {
			appLogin((user_info)=>{
				console.log(user_info)
				//显示接口内容
				this.display()
			})
		},
		methods: {
			to_companyNotice(type){
				uni.navigateTo({
					//带type跳转页面
				    url:'apply_notice?type='+type
				});
			},
			// 如果有onWsMessage App页面就会触发该方法
			onWsMessage(data){
				if(data.action == 'new_notice'){
					// 获取当前消息数
					this.display();
				}
			},
			display(){
				httpGet({
					url:'/api/company/notice_count',
				}).then((res) => {
						console.log(res.result)
						//获取列表
						this.one = res.result['1']
						this.three = res.result['3']
						this.ten = res.result['10']
				})
			},
		}
	}
</script>

<style>
	.top{
		background-color: rgb(59,115,246);
		text-align: center;
		height: 152rpx;
		line-height: 200rpx;
		color: rgb(255,255,255);
		font-size: 40rpx;
	}
	.xitong{
		background-color: rgb(255,255,255);
		margin-top: 35rpx;
	}
	.nzxx{
		display: flex;
		padding-top: 42rpx ;
		padding-left: 52rpx; 
		padding-bottom: 36rpx;
		border-bottom: solid 1rpx rgb(238,238,238);
		flex-shrink:0
	}
	.red{
		border-radius: 19rpx;
		background-color: rgb(252,83,102); 
		width: 90rpx;
		height: 90rpx;
		margin-bottom: 10rpx;
		margin-top: 5rpx;
		margin-left: -18rpx;
		position: relative;
	}
	.dalou{
		color: rgb(255,255,255);
		font-size: 86rpx;
		line-height: 90rpx;
		display: flex;
		justify-content: center;
	}
	.zitikuai{
		margin-top: 7rpx;
		margin-left: 34rpx;
	}
	.xtxx{
		color: rgb(19,19,19);
		font-size: 30rpx;
		font-weight: bold;
		display: flex;
	}
	.jtian{
		position: fixed;
		right: 10rpx;
		font-weight: normal;
		font-size: 24rpx;
		color: rgb(194,194,194);
		margin-right: 26rpx;
	}
	.shizhuan{
		width: 550rpx;
		height: 40rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: rgb(153,153,153);
		margin-top: 8rpx;
	}
	.blue{
		border-radius: 19rpx;
		background-color: rgb(51,149,255); 
		width: 90rpx;
		height: 90rpx;
		margin-bottom: 10rpx;
		margin-top: 5rpx;
		margin-left: -18rpx;
		flex-shrink:0
	}
	.maozi{
		color: rgb(255,255,255);
		font-size: 54rpx;
		line-height: 90rpx;
		display: flex;
		justify-content: center;
	}
	.green{
		border-radius: 19rpx;
		background-color: rgb(72,215,171); 
		width: 90rpx;
		height: 90rpx;
		margin-bottom: 10rpx;
		margin-top: 5rpx;
		margin-left: -18rpx;
	}
	.sqjr{
		padding-left: 52rpx;
		padding-top: 36rpx;
		color: rgb(51,51,51);
		font-size: 32rpx;
	}
	.flex{
		padding-top: 15rpx;
		color: rgb(179,179,179);
		font-size: 22rpx;
		font-weight: normal;
	}
	.numBox{
		border-radius: 100rpx;
		width: 38rpx;
		height: 38rpx;
		position: absolute;
		background-color: rgb(255,92,92);
		text-align: center;
		color: rgb(255,233,233);
		border: solid 4rpx rgb(255,255,255);
		margin-top: -105rpx;
		margin-left: 65rpx;
	}
</style>
